<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 60px;">
                <div style="width: 250px; float: left;">
                    <hu-select-dict v-model="datasourceId" :selectDic="datasorceList" title="数据源" search />
                </div>
                <div style="width: 400px; float: left;">
                    <hu-select-dict v-model="tableName" :selectDic="tableListDict" title="表名称" search/>
                </div>
                <div class="top-button">
                    <hu-button @click="catchInfo()" value="获取" size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="addPrefixSuffix()" value="添加前后缀"
                        size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="mergeFields()" value="合并字段"
                        size="big" />
                </div>
            </div>
            
            <hu-table ref="table" v-model="tIndex" :tableInfo="tableInfo" height-reduce="60px" option-width="160" notOption
                checkbox>
            </hu-table>
            <hu-dialog title="添加前/后缀" top="15%" ref="addPrefixSuffixDialogOpen" width="650px" submit="获取脚本"
                @hu-dialog="addPrefixSuffixDialog">
                <hu-select-dict v-model="insertInfo.rule" :selectDic="insertType" title="操作类型" search/>
                <hu-input 
                        v-if="insertInfo.rule != null"
                        v-model="insertInfo.subFiledValue"
                        title="" 
                        placeholder="请输入待插入值"/>
            </hu-dialog>
            <hu-dialog title="合并字段" top="15%" ref="mergeFieldsDialogOpen" width="650px" submit="获取脚本"
                @hu-dialog="mergeFieldsDialog">
                <hu-select-dict v-model="mergeInfo.rule" :selectDic="mergeType" title="操作类型" search/>
                <hu-select-dict search
                    v-if="mergeInfo.rule === 'mergeExist'"
                    v-model="mergeInfo.mergeFieldTo"
                    :selectDic="columnNameDict"
                    title="字段名" 
                    placeholder="请选择字段名"/>
                <hu-input 
                    v-if="mergeInfo.rule === 'mergeNew'"
                    v-model="mergeInfo.mergeFieldTo"
                    title="新字段名" 
                    placeholder="请输入字段名"/>
                <hu-input 
                    v-if="mergeInfo.rule === 'mergeNew'"
                    v-model="mergeInfo.mergeFieldType"
                    title="字段类型" 
                    placeholder="请输入字段类型"/>
                <hu-input 
                    v-model="mergeInfo.regx"
                    title="连接符" 
                    placeholder="请输入连接符"/>
            </hu-dialog>
            <hu-dialog title="SQL" top="15%" ref="sqlDataDialogOpen" width="60vw" submit="确认" @hu-dialog="sqlDataDialog">
                <div style="height: 55vh;margin-bottom: 7px;">
                    <hu-editor v-model="sqlData" :mode="editorMode" autoFormat></hu-editor>
                </div>
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { selectBaseInfoList, selectColumnDetails } from '@/api/base'
import { alertFieldValue, mergeFields } from '@/api/dataopt/alter'
import { isEmpty } from '@/utils/validate'
export default {
    name: '修改表字段',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            editorMode: 'sql',
            sqlData: null,

            insertInfo: {
                rule: null,
                tableName: null,
                subFiledValue: null,
                fieldNames: []
            },
            insertType: [
                {
                    label: '插入前缀',
                    value: 'insertPrefix'
                },{
                    label: '插入后缀',
                    value: 'insertSuffix'
                }
            ],

            mergeInfo: {
                rule: null,
                tableName: null,
                mergeFieldTo: null,
                mergeFieldType: null,
                regx: null,
                fieldNames: []
            },
            mergeType: [
                {
                    label: '合并到新字段',
                    value: 'mergeNew'
                },{
                    label: '合并到已存在字段',
                    value: 'mergeExist'
                }
            ],
            columnNameDict:[],

            datasourceId: null,
            tableListDict: [],
            tableName: null,
            tableType: 'BASE TABLE',
            loading: true,
            tIndex: [],
            tableInfo: {
                title: [
                    {
                        value: 'tableSchema',
                        label: '库名',
                        width: '280'
                    }, {
                        value: 'tableName',
                        label: '表名',
                        width: '310'
                    }, {
                        value: 'columnName',
                        label: '列名',
                        width: '310'
                    }, {
                        value: 'columnType',
                        label: '列类型',
                        width: '150'
                    }, {
                        value: 'columnComment',
                        label: '列注释',
                        width: '340'
                    },
                ],
                value: []
            },
            datasorceList: [],
            characterSetList: [],
            collateList: []
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.selectDataSourceList();
        this.selectList()
    },
    watch: {
        datasourceId(newVal, oldVal) {
            this.tableListDict = []
            this.tableName = ""
            selectBaseInfoList(newVal, null, this.tableType).then((res) => {
                const tableDetials = res.data.data
                for (let item of tableDetials) {
                    let obj = {
                        value: item.tableName,
                        label: `${item.tableName}(${isEmpty(item.tableComment)?'暂无注释':item.tableComment})`
                    }
                    this.tableListDict.push(obj)
                }
            }).catch((error => {
                this.$huTip({ type: 'error', value: error })
            }))
        }
    },
    methods: {
        // 获取数据源字典
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for (let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        selectList() {
            this.loading = false
        },
        // 获取按钮
        catchInfo() {
            if (isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
            } else if (isEmpty(this.tableName)) {
                console.log(this.tableName)
                this.$huTip({ type: 'warning', value: "请选择表" })
            } else {
                this.loading = true
                selectColumnDetails(this.datasourceId, this.tableName).then((res) => {
                    this.loading = false
                    this.tableInfo.value = res.data.data
                }).catch((error => {
                    this.loading = false
                    this.$huTip({ type: 'error', value: error })
                }))
            }
        },
        // 按钮点击检验
        validOnClick() {
            if (isEmpty(this.tIndex)) {
                this.$huTip({ type: 'warning', value: "至少选择一条数据" })
                return false
            }
            if (isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
                return false
            }
            return true
        },
        // 添加前缀或后缀
        addPrefixSuffix() {
            if (!this.validOnClick()) {
                return
            }
            this.$refs.addPrefixSuffixDialogOpen.openDialog()
        },
        addPrefixSuffixDialog(val) {
            if (!val) {
                this.insertInfo.optType = null
                return
            } else if(!isEmpty(this.insertInfo.rule) && !isEmpty(this.insertInfo.subFiledValue)) {
                this.insertInfo.tableName = this.tableName
                this.insertInfo.fieldNames = this.getColumnNameWithIndex()
                alertFieldValue(this.insertInfo).then((res) => {
                    this.$refs.addPrefixSuffixDialogOpen.closeDialog()
                    this.sqlData = res.data.data
                    this.$refs.sqlDataDialogOpen.openDialog()
                }).catch((error) => {
                    this.$huTip({ type: 'error', value: error })
                })
            } else {
                this.$huTip({ type: 'warning', value: '操作类型和待插入值不可为空' })
            }
        },
        // 合并字段
        mergeFields() {
            if (!this.validOnClick()) {
                return
            }
            this.tableInfoToColumnNameDict()
            this.$refs.mergeFieldsDialogOpen.openDialog()
        },
        mergeFieldsDialog(val) {
            if (!val) {
                return
            }
            this.mergeInfo.tableName = this.tableName
            this.mergeInfo.fieldNames = this.getColumnNameWithIndex()
            mergeFields(this.mergeInfo).then((res) => {
                this.$refs.mergeFieldsDialogOpen.closeDialog()
                this.sqlData = res.data.data
                this.$refs.sqlDataDialogOpen.openDialog()
            }).catch((error) => {
                this.$huTip({ type: 'error', value: error })
            })
        },

        // 根据tableInfo获取列字典
        tableInfoToColumnNameDict() {
            for(let item of this.tableInfo.value) {
                var obj = {
                    value: item.columnName,
                    label: `${item.columnName}(${isEmpty(item.columnComment)?'暂无注释':item.columnComment})`
                }
                this.columnNameDict.push(obj)
            }
        },

        sqlDataDialog(val) {
            if (!val) {
                this.clearSqlData()
                return
            }
        },
        // 根据选中的行获取表名集合
        getColumnNameWithIndex() {
            let columnName = []
            for (let index of this.tIndex) {
                columnName.push(this.tableInfo.value[index].columnName)
            }
            return columnName
        },
        // 清空过滤函数
        clearSqlData() {
            this.sqlData = ''
        },
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}

.top-button {
    float: left;
    margin-top: 18px;
    margin-left: 10px;
}

.column-box {
    width: 90%;
    margin: 0 auto;

    &-item {
        width: 50%;
        float: left;
    }
}
</style>